<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>助老服务管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <!--<el-form-item label="服务提交日期：">
        <el-date-picker v-model="dateRange" type="daterange" :picker-options="pickerOptions" size="small"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
      </el-form-item>-->
      <el-form-item label="服务状态：">
        <el-select v-model="formInline.status" clearable size="small">
          <el-option label="待接单" :value="0"></el-option>
          <el-option label="处理中" :value="1"></el-option>
          <el-option label="已完成/待反馈" :value="2"></el-option>
          <el-option label="已反馈" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中">
      <el-table-column align="center" label="提交人" prop="publishUser.nickName">
        <template slot-scope="scope">
          <span class="pname">{{ scope.row.publishUser.nickName }}</span>
          <span class="community">（{{ scope.row.publishUser.birthday|calAge }}岁）</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="提交时间" width="150">
        <template slot-scope="scope">
          <div>{{scope.row.publishTime|timestampToDayHM}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="serviceType" label="服务类型"></el-table-column>
      <el-table-column align="center" prop="title" label="标题" min-width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="blue">{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="接单志愿者" prop="publishUser.nickName">
        <template slot-scope="scope">
          <div v-if="scope.row.acceptUserId!=null">
            <span class="pname">{{ scope.row.volunteer.nickName }}</span>
            <span class="community">（{{ scope.row.volunteer.mobile }}）</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="status" label="服务状态" width="120">
        <template slot-scope="scope">
          <el-tag size="small" type="info" v-if="scope.row.status==-1">已取消</el-tag>
          <el-tag size="small" type="danger" v-if="scope.row.status==0">待接单</el-tag>
          <el-tag size="small" type="primary" v-if="scope.row.status==1">已接单</el-tag>
          <el-tag size="small" type="success" v-if="scope.row.status==2">已完成</el-tag>
          <el-tag size="small" type="success" v-if="scope.row.status==3">已评价</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" v-if="scope.row.status==1||scope.row.status==0" @click="onCancel(scope.row.order, -1)">取消</el-button>
          <el-button size="mini" type="primary" @click="handleDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!--详情对话框-->
    <el-dialog
      title="服务详情"
      :visible.sync="detailVisible"
      width="60%"
      :close-on-click-modal=false
      :show-close="true"
    >
      <el-descriptions class="margin-top" :column="2" border v-if="currDetailData!=null">
        <el-descriptions-item label="提交人">{{ currDetailData.publishUser.nickName }}</el-descriptions-item>
        <el-descriptions-item label="提交时间">
          {{currDetailData.publishTime|timestampToDayHM}}
        </el-descriptions-item>
        <el-descriptions-item label="服务类型">
          {{ currDetailData.serviceType }}
        </el-descriptions-item>
        <el-descriptions-item label="标题">
          {{ currDetailData.title }}
        </el-descriptions-item>
        <el-descriptions-item label="详情" span="2">{{currDetailData.content}}</el-descriptions-item>
        <el-descriptions-item label="备注" span="2" v-if="currDetailData.remark!=''">{{currDetailData.remark}}</el-descriptions-item>
        <el-descriptions-item label="接单人" v-if="currDetailData.status>0">{{ currDetailData.volunteer.nickName }}</el-descriptions-item>
        <el-descriptions-item label="接单时间" v-if="currDetailData.status>0">{{currDetailData.acceptTime|timestampToDayHM}}</el-descriptions-item>
        <el-descriptions-item label="评分" span="2" v-if="currDetailData.status==3"><el-rate v-model="currDetailData.feedbackRate" disabled show-score text-color="#ff9900"> </el-rate></el-descriptions-item>
        <el-descriptions-item label="评价内容" span="2" v-if="currDetailData.status==3">{{ currDetailData.feedback }}</el-descriptions-item>
      </el-descriptions>
      <div class="demo-image" v-if="currDetailData!=null">
        <div class="block" v-for="fit in currDetailData.picList" :key="fit">
          <a :href="fit" target="_blank">
          <el-image
            style="width: 100px; height: 100px"
            :src="fit"
            fit="cover"></el-image>
          </a>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination.vue";
import { GetServiceList, CancelServiceStatus } from '@/api/api.js'

export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      detailVisible: false, //详情对话框显示与隐藏
      title: "添加",
      editForm: {
        orderId: '',
        orderCode: '',
        expNo: '',
        status: ''
      },
      currDetailData: null,
      // rules表单验证
      rules: {
        expNo: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      formInline: {
        kw: "",
        currentPage: 1,
        pageSize: 10,
        status: ''
      },
      listData: [], //列表数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      fullscreenLoading: false,
      pickerMinDate: '',
      dateRange: [],
      pickerOptions: {
        
      },
    }
  },
  // 注册组件
  components: {
    Pagination,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取获奖列表
    getdata(parameter) {
      this.loading = true;
      // if(this.dateRange.length>0){
      //   parameter.startTime=this.dateRange[0]
      // }
      // if(this.dateRange.length>1){
      //   parameter.endTime=this.dateRange[1]
      // }
      GetServiceList(parameter)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.listData = res.data.records;
            this.pageparm.currentPage = res.data.currentPage;
            this.pageparm.pageSize = res.data.pageSize;
            this.pageparm.total = res.data.totalrecord;
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.editFormVisible = false;
          this.loading = false;
          this.$message.error("获取数据失败，请稍后再试！");
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.currentPage = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.formInline.total = parm.total
      this.getdata(this.formInline);
    },
    // 搜索事件
    query() {
      this.getdata(this.formInline);
    },
    //显示发货界面
    handleEdit: function (row) {
      this.editFormVisible = true;
      this.title = "订单发货";
      this.editForm.orderId = row.orderId
      this.editForm.orderCode = row.orderCode
      this.editForm.expNo = ''
      this.editForm.status = 3
    },
    
    // 取消服务
    onCancel(order){
      this.$confirm('确认要取消该服务吗？', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let req={
          oid: order.orderId,
          status: -1
        }
        CancelServiceStatus(req).then((res) => {
          if (res.code==0) {
            this.$message({
              type: 'success',
              message: '服务已取消'
            })
            this.getdata()
          } else {
            this.$message.error(res.msg);
          }
        }).catch((err) => {
          this.$message.error("取消失败！");
        });
      })
    },
    //显示详情界面
    handleDetail: function (row) {
      console.log(row)
      this.currDetailData = row
      this.detailVisible = true
      console.log('显示详情：',this.currDetailData)
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
    closeDialog2() {
      this.detailVisible = false;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.pitems{
  clear: both;
  height: 38px;
  line-height: 38px;
  text-align: left;
}
.pitems .opname{
  padding-left: 10px;
}
.pname{
  color: #53a8ff;
}
.demo-image{
  width: 80%;
  margin: 15px auto;
}
</style>